<!DOCTYPE html>
<html lang="en">
	<head>
		<title>3D 查看器</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {

				background-color: #000;
				color: #fff;
				margin: 0;
				overflow: hidden;
			}
			.up {

				position: absolute;
				right: 0;
				top: 0;
				width: 20%;
				height: 14%;
				color: red;
				background: #333;
				z-index: 1002;

			}
			.color{
				position: absolute;
				right: 0;
				top: 14%;
				width: 20%;
				height: 14%;
				color: red;
				background: #333;
				z-index: 1002;
			}
			.rough{
				position: absolute;
				right: 0;
				top: 28%;
				width: 20%;
				height: 14%;
				color: red;
				background: #333;
				z-index: 1002;
			}
			.ao{
				position: absolute;
				right: 0;
				top: 42%;
				width: 20%;
				height: 14%;
				color: red;
				background: #333;
				z-index: 1002;
			}
			.o{
				position: absolute;
				right: 0;
				top: 56%;
				width: 20%;
				height: 14%;
				color: red;
				background: #333;
				z-index: 1002;
			}
			.n{
				position: absolute;
				right: 0;
				top: 70%;
				width: 20%;
				height: 16%;
				color: red;
				background: #333;
				z-index: 1002;
			}
            .em{
                position: absolute;
                right: 0;
                top: 84%;
                width: 20%;
                height: 14%;
                color: red;
                background: #333;
                z-index: 1002;
            }
			.transition{
				position: absolute;
				right: 0;
				top: 98%;
				width: 20%;
				height: 2%;
				color: red;
				background: #333;
				z-index: 1002;
			}
			#fbx{
				margin: 16px;
			}
			.btn {
			    width: 100px;
			    height: 50px;
			    font-size: 10px;
			    color: #fff;
			    background: #28abde;
			    border-radius: 5px;
			    position: absolute;
			    top: 50px;
			    left: 30%;
			}
			.input {
			    width: 100px;
			    height: 50px;
			    position: absolute;
			    top: 50px;
			    left: 30%;
			    z-index: 1;	
			    opacity: 0;
			    font-size: 8px;
			}
			.none{
                font-size: 14px;
				display: none;
			}

		</style>
	</head>

	<body>
		
		<div class='canvas' id='canvas' style="width: 80%;margin: 0;"></div>
		<div class="box">
			<div class="up">
				<input class='input' type="file" name="fbxUpload" id="fbx">
				<input class="btn" id="submit" value="上传fbx" type="button">
                <label for="upload1" class="none" id="none1">上传完成</label><input type="checkbox" name="radioUp" id="upload1" onclick="return false">
			</div>
			<div class="color">
				<input class='input' type="file" name="textureUpload" id='texture' >
				<input class="btn" id="submit1" value="上传颜色贴图" type="button">
                <label for="upload2" class="none" id="none2">上传完成</label><input type="checkbox" name="radioUp" id="upload2" onclick="return false">
			</div>
			<div class="rough">
				<input class='input' type="file" name="textureUpload" id="roughnessTexture" >
				<input class="btn" id="submit2" value="上传粗糙度贴图" type="button">
                <label for="upload3" class="none" id="none3">上传完成</label><input type="checkbox" name="radioUp" id="upload3" onclick="return false">
			</div>
			<div class="ao">
				<input class='input' type="file" name="textureUpload" id="AOTexture" >
				<input class="btn" id="submit3" value="上传AO贴图" type="button">
                <label for="upload4" class="none" id="none4">上传完成</label><input type="checkbox" name="radioUp" id="upload4" onclick="return false">
			</div>
			<div class="o">
				<input class='input' type="file" name="textureUpload" id="OTexture" >
				<input class="btn" id="submit4" value="上传透明贴图" type="button">
                <label for="upload5" class="none" id="none5">上传完成</label><input type="checkbox" name="radioUp" id="upload5" onclick="return false">
			</div>
			<div class="n">
				<input class='input' type="file" name="textureUpload" id="normalTexture" >
				<input class="btn" id="submit5" value="上传法向量贴图" type="button">
                <label for="upload6" class="none" id="none6">上传完成</label><input type="checkbox" name="radioUp" id="upload6" onclick="return false">
			</div>
            <div class="em">
                <input class="btn" id="changeScene" value="更换场景" type="button" >                
            </div>
            <div class="transition"></div>
		</div>


		<script src="js/three.js"></script>

		<script src="js/inflate.min.js"></script>
		<script src="js/FBXLoader.js"></script>
		<script src="js/PLYLoader.js"></script>

		<script src="js/OrbitControls.js"></script>

		<script src="js/Detector.js"></script>
		<script src="js/stats.min.js"></script>

		<script>

			// if (true) {} ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats, controls;
			var camera, scene, renderer;

			var sceneFlag = 0;//0代表黑色 1代表白色
			

			var clock = new THREE.Clock();

			var mixers = [];

			var textureLoader = new THREE.TextureLoader();

			init();
			animate();

			var fbx = document.getElementById('fbx');

			var texture = document.getElementById('texture');
			var roughnessTexture = document.getElementById('roughnessTexture');
			var AOTexture = document.getElementById('AOTexture');
			var OTexture = document.getElementById('OTexture');
			var normalTexture = document.getElementById('normalTexture');
			var changeScene = document.getElementById('changeScene');

			var upload1 = document.getElementById('upload1');
			var upload2 = document.getElementById('upload2');
			var upload3 = document.getElementById('upload3');
			var upload4 = document.getElementById('upload4');
			var upload5 = document.getElementById('upload5');
			var upload6 = document.getElementById('upload6');
			
			var none1 = document.getElementById('none1');
			var none2 = document.getElementById('none2');
			var none3 = document.getElementById('none3');
			var none4 = document.getElementById('none4');
			var none5 = document.getElementById('none5');
			var none6 = document.getElementById('none6');
			

			fbx.onchange = function () {
				var file = this.files[0];  
                var reader = new FileReader();
                reader.readAsDataURL(file);                    
                reader.onload = function() {
                    // 图片base64化
                    var newUrl = this.result;
                    loadFbx(newUrl);
                    upload1.checked = 'checked';
                    upload2.checked = '';
                    upload3.checked = '';
                    upload4.checked = '';
                    upload5.checked = '';
                    upload6.checked = '';
                    
                    none1.style.display = 'block';
                    none2.style.display = 'none';
                    none3.style.display = 'none';
                    none4.style.display = 'none';
                    none5.style.display = 'none';
                    none6.style.display = 'none';
                   
                };
			};
			
			texture.onchange = function () {
                console.log('点击上传颜色贴图');
                var file = this.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);                    
                reader.onload = function() {
                    loadMap(this.result,'map');
                    upload2.checked = 'checked';  
                    none2.style.display = 'block';                
                };				
			};
            roughnessTexture.onchange = function () {
				
				var file = this.files[0];  
                var reader = new FileReader();
                reader.readAsDataURL(file);                    
                reader.onload = function() {

                    loadMap(this.result,'roughnessMap');
                    upload3.checked = 'checked'; 
                    none3.style.display = 'block';                   
                };				
			};
            AOTexture.onchange = function () {
				
				var file = this.files[0];  
                var reader = new FileReader();
                reader.readAsDataURL(file);                    
                reader.onload = function() {

                    loadMap(this.result,'aoMap');
                    upload4.checked = 'checked';
                    none4.style.display = 'block'; 	                  
                };				
			};
            OTexture.onchange = function () {
				
				var file = this.files[0];  
                var reader = new FileReader();
                reader.readAsDataURL(file);                    
                reader.onload = function() {

                    loadMap(this.result,'alphaMap');
                    upload5.checked = 'checked';   
                    none5.style.display = 'block';               
                };				
			};
            normalTexture.onchange = function () {
				
				var file = this.files[0];  
                var reader = new FileReader();
                reader.readAsDataURL(file);                    
                reader.onload = function() {

                    loadMap(this.result,'normalMap');
                    upload6.checked = 'checked';  
                    none6.style.display = 'block';            
                };				
			};
			changeScene.onclick = function (){

				changeFogColor();
			};


			function init() {
				var canvas = document.getElementById('canvas');

				container = document.createElement( 'div' );
				canvas.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth*.8 / window.innerHeight, 1, 4000 );
				camera.position.set( 100, 200, 300 );

				controls = new THREE.OrbitControls( camera );
				controls.target.set( 0, 100, 0 );
				controls.update();

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x4d4d4d );
				scene.fog = new THREE.Fog( 0x4d4d4d, 900, 1000 );				
			
		        var ambientLight = new THREE.AmbientLight(0xffffff, 0.3);//0xde6e6e
		        scene.add(ambientLight);

		        // 平行光一
		        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
		        directionalLight.position.set(50, 100, 300);
		        directionalLight.castShadow = true;
		        directionalLight.shadow.camera.near = 0.1;
		        directionalLight.shadow.camera.far = 1000;
		        directionalLight.shadow.camera.top = 1000;
		        directionalLight.shadow.camera.bottom = -1000;
		        directionalLight.shadow.camera.left = -1000;
		        directionalLight.shadow.camera.right = 1000;
		        directionalLight.shadow.mapSize.width = 1024;
		        directionalLight.shadow.mapSize.height = 1024;
		        directionalLight.shadow.radius = 1.0;
		        directionalLight.shadow.bias = -0.005;

		        scene.add(directionalLight);

		        //
		        var directionalLight1  = new THREE.PointLight(0x9bbadb, 0.8);
				directionalLight1 .position.set(50, 140, -100);
		        scene.add(directionalLight1);

                var pointLight1  = new THREE.PointLight(0xffdfbf, 0.2);
                pointLight1 .position.set(50, 40, 0);
                scene.add(pointLight1);

                var pointLight2  = new THREE.PointLight(0xffffff, 0.4);
                pointLight2 .position.set(-50, 40, 0);
                scene.add(pointLight2);
				

				// ground
				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshLambertMaterial( { color: 0x333333, depthWrite: false } ) );
				mesh.rotation.x = - Math.PI / 2;
				mesh.name = 'groundColor';
				//mesh.receiveShadow = true;
				scene.add( mesh );

				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
				grid.material.opacity = 0.4;
				grid.material.transparent = true;
				scene.add( grid );

				// model
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth*0.8, window.innerHeight );
				renderer.shadowMap.enabled = true;
				renderer.setClearAlpha(0);
				renderer.gammaInput = true;
        		renderer.gammaOutput = true;
        		renderer.shadowMapSoft = true;
				container.appendChild( renderer.domElement );
				// container.style.margin=0;
				// canvas.style.margin = 0;
				window.addEventListener( 'resize', onWindowResize, false );

				// stats
				stats = new Stats();
				//container.appendChild( stats.dom );

			}
			//1
			function loadFbx(mUrl) {

				var fbxGroup = scene.getObjectByName('fbxGroup');
				scene.remove(fbxGroup);
				var loader = new THREE.FBXLoader();
				loader.load( mUrl, function ( object ) {

					object.traverse( function ( child ) {

						if ( child.isMesh ) {
							console.log(object);
                            child.material = new THREE.MeshStandardMaterial();
                            child.material.roughness = 0.9;
                            child.material.metalness = 0;
							child.material.side = THREE.DoubleSide;
							child.material.skinning = true;
							child.material.transparent = true;
							child.castShadow = true;
							child.receiveShadow = true;
							child.name = 'fbx';
						}

					} );
                    object.name = 'fbxGroup';
					scene.add( object );
				//
				} );
				// var loader1 = new THREE.PLYLoader();
				// //加载头
				// loader1.load(mUrl, function (geometry) {
				//
				// 	var mesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({
				// 		transparent: true,
				// 		metalness: 0,
				// 		roughness: 1,
				// 		side: THREE.DoubleSide
				// 	}));
				// 	mesh.scale.multiplyScalar(100);
				// 	mesh.name = 'fbx';
				// 	mesh.castShadow = true;
				// 	mesh.receiveShadow = true;
				// 	scene.add(mesh);
				// });

			}
			function loadMap(tUrl,type) {
				var texture = textureLoader.load(tUrl);
				var model = scene.getObjectByName('fbx');
				console.log(model);
				if(type === 'map'){
					model.material.map = texture;
					model.material.needsUpdate  = true;
				}else if(type === 'roughnessMap'){

					model.material.roughnessMap = texture;
					model.material.needsUpdate  = true;
				}else if(type === 'aoMap'){

					model.material.aoMap = texture;
					model.material.needsUpdate  = true;
				}else if(type === 'normalMap'){

					model.material.normalMap = texture;
					model.material.needsUpdate  = true;
					console.log(model);
				}else if(type === 'alphaMap'){

					model.material.alphaMap = texture;
					model.material.needsUpdate  = true;
				}else if(type === 'emissiveMap'){

					model.material.emissiveMap = texture;
					model.material.needsUpdate  = true;
				}
			}
			function changeFogColor() {
				
				var groundColor = scene.getObjectByName('groundColor');
				if(sceneFlag===0){
					console.log(scene.fog);
					scene.fog = new THREE.Fog( 0xD4D4D4, 900, 1000 );
					scene.background = new THREE.Color( 0xD4D4D4 );
					groundColor.material.color = new THREE.Color( 0xD4D4D4 );
					groundColor.material.needsUpdate  = true;
					sceneFlag = 1;
				}else{
					scene.fog = new THREE.Fog( 0x4d4d4d, 900, 1000 );
					scene.background = new THREE.Color( 0x4d4d4d );
					groundColor.material.color = new THREE.Color( 0x4d4d4d );
					groundColor.material.needsUpdate  = true;
					sceneFlag = 0;
				}
				
			}
			function onWindowResize() {
			
				camera.aspect = window.innerWidth*.8 / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth*.8, window.innerHeight );

			}

			//
			function animate() {

				requestAnimationFrame( animate );

				if ( mixers.length > 0 ) {

					for ( var i = 0; i < mixers.length; i ++ ) {

						mixers[ i ].update( clock.getDelta() );

					}

				}
				
				renderer.render( scene, camera );

				stats.update();

			}

		</script>

	</body>
</html>
